import { UIEvent, useEffect, useRef, useState } from "react";
import Masonry from "masonry-layout";
import { randomColor, randomNum } from "@/utils/commonFn";
import "./style.less";
import { Button, Input, Spin, message } from "antd";
import { crawImgs, listImage } from "@/api/modules/entertainment";
import imagesloaded from "imagesloaded";
import { useThrottleFn } from "react-use";
import { throttle } from "lodash-es";
import Loading from "@/components/Loading";
import Image from "@/components/Image";
import { LuYanImage } from "@/components/Image/types";
import wallpaperbg from "./assets/image-wallpaper-bg.png";

const Youth: React.FC = () => {
  let fallRef = useRef<any>(null);
  let loadingRef = useRef<any>(null);
  let masinry: { layout: () => void };

  // 图片信息
  const [items, setItems] = useState<Array<LuYanImage>>([]);

  // 查询参数
  const [queryParam, setQueryParam] = useState<{ page: number; size: number }>({
    page: 1,
    size: 20,
  });

  // 没有更多图片
  const [noMore, setNoMore] = useState(false);

  // 显示加载组件
  const [inLoading, setInLoading] = useState(false);

  // 请求中
  const [pending, setPending] = useState(false);
  useEffect(() => {
    masinry = new Masonry(".fall-wapper", {
      itemSelector: ".fall-item",
      columnWidth: ".fall-item",
      horizontalOrder: true,
      gutter: 10,
    });
  });

  useEffect(() => {
    listImage<Array<LuYanImage>>(queryParam).then((data) => {
      setItems([...items, ...data]);
      setInLoading(false);
      setPending(false);
      if (data.length < queryParam.size) setNoMore(true);
    });
    const observer = imagesloaded(".fall-container");
    observer.on("done", () => {
      masinry.layout();
    });
  }, [queryParam]);

  // 追加图片
  const handleAppendImg = () => {
    setPending(true);
    setInLoading(true);
    setQueryParam({ ...queryParam, page: queryParam.page + 1 });
  };

  // 处理滚动
  const handleScroll = (e: UIEvent<HTMLDivElement, globalThis.UIEvent>) => {
    if (
      fallRef.current.scrollTop + fallRef.current.clientHeight >=
        fallRef.current.scrollHeight &&
      !noMore &&
      !pending
    )
      handleAppendImg();
  };

  return (
    <>
      <div className={`wallpaper-container h-full p-5`}>
        <div className="px-2">
          <h4>爱意随风起，风止意难平</h4>
        </div>
        <div
          ref={fallRef}
          className={`fall-container grow w-full h-full px-2 overflow-auto`}
          onScroll={(e) => handleScroll(e)}
        >
          <div>
            <div className="fall-wapper">
              {items.map((c, i) => {
                return (
                  <div className="fall-item" key={i}>
                    <div style={{ height: `${randomNum(300, 500)}px` }}>
                      <Image img={c}></Image>
                    </div>
                  </div>
                );
              })}
            </div>
            <div ref={loadingRef}>
              {inLoading && (
                <Spin className="mt-5" tip="正在加载...">
                  <div className="content" />
                </Spin>
              )}
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Youth;
